<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>

	<body>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		
		<!-- 底部导航条 -->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active " href="homePage.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="messagePage.html">
				<span class="mui-icon mui-icon-info"></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item" href="personPage.html">
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
	</body>
	<script type="text/javascript">
		var subPages = ['homePage.html', 'messagePage.html', 'personPage.html']; /* 主頁面中包含的四個頁面的地址放在數組 */
	
		/* 等硬件系统准备完毕，页面打开方式 webview 原生窗体*/
		mui.plusReady(function() {
			var self = plus.webview.currentWebview(); /* 拿到当前窗体主页面*/
			for (var i = 0; i < subPages.length; i++) {
				var sub = plus.webview.create(subPages[i], subPages[i], {top: '0px',bottom: '50px'}); /* 创建三个子窗体*/
				self.append(sub); /* 追加到主页面 */
			}
			plus.webview.show(subPages[0]); /* 将home子页面显示出来(提到最上层) */
		});
	
		/*鼠标点击事件，切换到对应子页面*/
		mui(".mui-bar-tab").on("tap", "a", function(e) {
			var tagPage = this.getAttribute("href"); /* 取a对应的页面地址*/
			
			//当加载messagePage时重新加载
			if (tagPage == "messagePage.html") {
				var msgPage = plus.webview.getWebviewById(tagPage);
				msgPage.reload(true);
			}
			
			plus.webview.show(tagPage);
		}); /* 通过选择器找到nav标签，给每一个a元素绑定触摸tap事件 */
	</script>
</html>
